<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>aframe-skymap-component</title>
  <script src="./assets/aframe-140.min.js"></script>
  <script src="./assets/aframe-orbit-controls.js"></script>
  <script src="lib/main.js"></script>
</head>
<body>
  <a-scene vr-mode-ui="enabled:false;" light="defaultLightsEnabled:false" renderer="antialias:true;" shadow="type:pcfsoft; autoUpdate:true;">

    <!-- <a-gltf-model src="./models/dir.gltf" sky-map="intensity:1; roughness:.5; metalness:.5; background:true"></a-gltf-model> -->
    <a-sphere material="color:#09f;" sky-map="intensity:2; roughness:.3; metalness:.6; background:true;" shadow="receive:true;" segments-width="24" segments-height="12"></a-sphere>
    <a-circle material="color:#555;" sky-map="intensity:1; roughness:.3; metalness:.6;" shadow="receive:true;" radius="10" rotation="-90 0 0" position="0 -1 0" segments="12"></a-circle>

    <a-entity camera orbit-controls="target:0 0 0; initial-position:0 2 -3"></a-entity>

    <a-entity light="type:hemisphere; color:#eee; groundColor:#333; intensity:.5"></a-entity>
    <!-- <a-entity light="type:directional; castShadow:true; intensity:.5" position="5 1 2" animation="property:position; to:-5 1 2; dur:2000; easing:easeInOutCubic; dir:alternate; loop:true;"></a-entity> -->
    <!-- <a-entity light="type:point; castShadow:true; intensity:.5;" position="2 1 2" animation="property:position; to:-3 1 2; dur:1500; easing:easeInOutCubic; dir:alternate; loop:true;"> -->
      <!-- <a-box color="#fff" scale=".1 .1 .1" position="0 1 0"></a-box> -->
    <!-- </a-entity> -->
  </a-scene>
</body>
</html>